<template>
  <el-dialog :visible.sync="visible"
    custom-class="dialog-record"
    :modal-append-to-body="true"
    :close-on-click-modal="true"
    @close="onDialogClose"
    :append-to-body="true"
    title="发票记录"
    width="520px">
    <el-table :data="tableData" v-loading="listLoading" height="210px" class="order-table">
      <el-table-column
        align="center"
        header-align="center"
        prop="pay_price"
        label="申请时间"
        min-width="115">
        <template slot-scope="scope">
          {{scope.row.submit_time}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="order_id"
        label="订单"
        min-width="155">
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label-class-name="order-last-header"
        label="状态"
        min-width="60">
        <template slot-scope="scope">
          {{scope.row.status|statusFilter}}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      small
      hide-on-single-page
      class="order-pagination"
      :pager-count="5"
      layout="prev, pager, next"
      :page-size="100"
      :current-page.sync="page"
      :total="total"
      @current-change="getList">
    </el-pagination>
    <div class="bottom-text">
      <i class="el-icon-warning-outline"></i>
      <p class="ml10">状态显示【已开票】，即代表发票已发送到您邮箱！（由于邮箱审核规则不同，邮件有可能会进入垃圾箱，请注意查看）已退款订单，我们将核销已开具的发票；【已驳回】订单，可重新发起申请。</p>
    </div>
  </el-dialog>
</template>
<script>
import { inoviceList } from '@/api/order'
export default {
  name: 'InvoiceRecordDialog',
  props: {
    showRecordVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      page: 1,
      total: 0,
      tableData: [],
      listLoading: false
    }
  },
  filters: {
    statusFilter (val) {
      const arr = ['', '审核中', '开票中', '已开票', '开票失败', '已驳回', '已作废', '报废中', '报废失败']
      return arr[val]
    }
  },
  computed: {
    visible: {
      get () {
        return this.showRecordVisible
      },
      set (val) {
        this.$emit('update:showRecordVisible', val)
      }
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.getList()
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      const params = {
        page: this.page,
        page_size: 100
      }
      this.listLoading = true
      inoviceList(params).then(res => {
        const data = res.data || {}
        this.tableData = data.list
        this.total = data.count
      }).finally(() => {
        this.listLoading = false
      })
    },
    onDialogClose () {
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .dialog-record {
  // height: 84vh;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  border: 1px solid #e1e1e1;
  padding: 16px 0 24px;
  position: relative;
  .el-dialog__header {
    padding: 0 20px;
  }
  .el-dialog__title {
    color: #333333;
    font-size: 14px;
    line-height: 16px;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: rgba(51, 51, 51, .7);
  }
  .el-dialog__body {
    padding: 24px 20px;
    color: #333333;
  }

  .el-table .cell {
    padding: 9px 0;
  }
  .el-table, .el-table th.gutter {
    background: #ffffff;
  }
  .el-table th.is-leaf {
    background: rgba(51,51,51,0.05);
    border-top: 1px solid rgba(51,51,51,0.1);
    color: #333333;
  }
  .order-table th:first-child {
    border-radius: 4px 0 0 0;
    border-left: 1px solid rgba(51,51,51,0.1);
  }
  .order-table th.order-last-header {
    border-radius: 0 4px 0 0;
  }
  .el-table th.is-leaf, .el-table td {
    border-bottom: 1px solid rgba(51,51,51,0.1);
    border-right: 1px solid rgba(51,51,51,0.1);
  }
  .el-table td:first-child  {
    border-left: 1px solid rgba(51,51,51,0.1);
  }

  .bottom-text {
    display: flex;
    font-size: 12px;
    line-height: 20px;
    align-items: center;
    margin-top: 100px;
    .el-icon-warning-outline {
      color: #FC9797;
      font-size: 24px;
    }
  }
  ::-webkit-scrollbar {
    background-color: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.3);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,.4);
  }
}
</style>
